import React, { useEffect, useState } from "react";
import http from "../../api/http";
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate, useSearchParams } from "react-router-dom";
import { InfiniteScroll, List } from "antd-mobile";
import styles from "./index.module.css";
import MyNavTime from "../../component/MyNavTime"
function Index() {
  const navigate = useNavigate();
  const [sj] = useSearchParams();
  const start = sj.get("start");
  const end = sj.get("end");
  const date = sj.get("date");
  // console.log(start, end, date);
  const [isSpeed, setIsSpeed] = useState(false);
  const [isSeat, setIsSeat] = useState(false);
  const [isDesc, setIsDesc] = useState(false);
  const [page, setpage] = useState(1);
  const [tickList, settickList] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const getTickList = async () => {
    const res = await http.post("/api/trip/train", {
      start,
      end,
      date,
      isDesc,
      isSeat,
      isSpeed,
      page,
    });
    const { data, code } = res.data;
    console.log(data);

    if (code === 200) {
      settickList([...tickList, ...data]);
      setpage((pre) => pre + 1);
    }

    if (data.length === 0) {
      setHasMore(false);
    }
  };
  useEffect(() => {
    getTickList();
  }, []);
  const handleTodeitle=(item)=>{
    navigate(`/deitle`,{state:item})
  }
  return (
    <div>
      <NavBar onBack={() => navigate("/")}>车票列表页</NavBar>
      <MyNavTime></MyNavTime>
      <div>
        {tickList?.map((item, ind) => (
          <div className={styles.listItem} key={ind} onClick={()=>handleTodeitle(item)}>
            <div className={styles.listItem_left}>
              <span>{item.start}</span>
              <span>{item.end}</span>
              <span>{item.startTime}</span>
              <span>商务座 <b>有票</b></span>
              <span>二等座 <b>有票</b></span>
              <span>三等座 <b>有票</b></span>
            </div>
            <div className={styles.listItem_right}>
              ￥{item.tick.vip}
            </div>
          </div>
        ))}
      </div>

      <InfiniteScroll loadMore={getTickList} hasMore={hasMore} />
    </div>
  );
}

export default Index;
